{% extends 'layout.html' %}
{% load static %}

{% block title %} 登录界面 {% endblock %}
{% block BodyClass %}page-title{% endblock %}

{% block contect %}
<main class="main">
    <div class="page-title" data-aos="fade">
      <div class="container d-lg-flex justify-content-between align-items-center">
        <h1 class="mb-2 mb-lg-0"></h1>
        <nav class="breadcrumbs">
          <ol>
            <li><a href="{% url 'index'%}"></a></li>
            <li class="current"></li>
          </ol>
        </nav>
      </div>
    </div><!-- End Page Title -->

<!--    <section id="starter-section" class="starter-section section">-->
    <section id="login-section" class="login-section section">

    <div class="container section-title" data-aos="fade-up">
        <h2>登录页面</h2>

        <div class="container mt-5">
            <div class="row justify-content-center">
                <div class="col-md-6">
                    <div class="hold-transition login-page" >

                        <div class="login-box">

                            <div class="card" style="background-color:white;height:{height}px">
                                <div class="card-body login-card-body">

                                <form method="post">
                                    <div class="mb-6">
                                        <label for="username" class="form-label" style="font-size:16px;margin-top:20px">用户名</label>
                                        <input type="text" class="form-control" style="margin-top:20px" id="username" name="username" required>
                                    </div>
                                    <div class="mb-6">
                                        <label for="password" class="form-label" style="font-size:16px;margin-top:20px">密码</label>
                                        <input type="password" class="form-control" style="margin-top:20px" id="password" name="password" required>
                                    </div>

                                    <button type="submit" style="background-color:#2e7c90;margin-top:40px;weight:200px" class="btn mb-3">
                                            <b style="color:white;font-weight:100">确认</b>
                                    </button>
                                    {% if form.non_field_errors %}
                                        <div class="alert alert-danger mt-3" role="alert">
                                            {{ form.non_field_errors }}
                                        </div>
                                    {% endif %}
                                </form>
                                </div>
                            </div>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div><!-- End Section Title -->


    </section>


</main>

{% endblock %}


.login-button {
    padding: 15px 30px;
    font-size: 16px;
    color: #ffffff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.login-button:hover {
    background-color: #0056b3;
}

.login-button:active {
    background-color: #004085;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(2px);
}